<template>
  <div class="pa30 pb100">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="关注" name="first">
        <div class="pa30">
          <custom-table :data="followedList" :columns="followedColumns" />
          <pagination :total="followedTotal" @pagination="followedPagination" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="粉丝" name="second">
        <div class="pa30">
          <custom-table :data="fansList" :columns="fansColumns" />
          <pagination :total="fansTotal" @pagination="fansPagination" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';

import { followed, fans } from '@/api/users';

export default {
  name: 'UserFans',
  components: {
    CustomTable,
    Pagination
  },
  data () {
    return {
      // 关注搜索
      followedList: [],
      followedTotal: 0,
      followedQuery: {
        condition: this.$route.query.userId,
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      followedColumns: [
        { label: '序号', value: 'index', align: 'center', width: '100px' },
        { label: '关注用户', value: 'name', align: 'center', width: '140px' },
        { label: '学校', value: 'school', align: 'center' },
        { label: '职称', value: 'titleNameTxt', align: 'center' },
        { label: '是否互关', value: 'isMutualTxt', align: 'center', width: '140px' }
      ],

      // 粉丝搜索
      fansList: [],
      fansTotal: 0,
      fansQuery: {
        condition: this.$route.query.userId,
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      fansColumns: [
        { label: '序号', value: 'index', align: 'center', width: '100px' },
        { label: '关注用户', value: 'name', align: 'center', width: '140px' },
        { label: '学校', value: 'school', align: 'center' },
        { label: '职称', value: 'titleNameTxt', align: 'center' },
        { label: '是否互关', value: 'isMutualTxt', align: 'center', width: '140px' }
      ],

      activeName: 'first'

    };
  },
  created () {
    console.log(this.$route.query.userId);
    this.init();
  },
  methods: {
    handleClick (tab, event) {
      console.log('当前tab索引:', tab.index, this.activeName);
      // console.log(tab, event)
    },

    async init () {
      await this.followedInit();
      await this.fansInit();
    },

    // 关注
    followedInit () {
      followed(this.followedQuery)
        .then(res => {
          // console.log('关注:', res.data.records);
          if (this.checkArr(res.data.records)) {
            res.data.records.map(item => {
              item.isMutualTxt = item.isMutual ? '是' : '否';
              item.titleNameTxt = item.titleName ? item.titleName + '教师' : '';
            });
          }

          this.followedList = res.data.records;
          this.followedTotal = res.data.total;
        })
        .catch(error => { });
    },
    followedPagination ({ page, limit }) {
      this.followedQuery.pager.page = page;
      this.followedQuery.pager.pageSize = limit;
      this.followedInit();
    },

    // 粉丝
    fansInit () {
      fans(this.fansQuery)
        .then(res => {
          // console.log('粉丝:', res.data.records);
          if (this.checkArr(res.data.records)) {
            res.data.records.map(item => {
              item.isMutualTxt = item.isMutual ? '是' : '否';
              item.titleNameTxt = item.titleName ? item.titleName + '教师' : '';
            });
          }
          this.fansList = res.data.records;
          this.fansTotal = res.data.total;
        })
        .catch(error => { });
    },
    fansPagination ({ page, limit }) {
      this.fansQuery.pager.page = page;
      this.fansQuery.pager.pageSize = limit;
      this.fansInit();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.forms_w50 {
  width: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50%;
  height: 50%;
  line-height: 158px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.form_list {
  height: 170px;
  padding: 20px;
  border: 1px solid black;
  overflow: auto;
  line-height: 30px;
}

.upload_img {
  height: 200px;
  overflow: hidden;
}

.test {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.tag {
  border: 1px solid black;
  border-radius: 20px;
  padding: 5px 10px;

  &_status {
    background: rgb(79, 192, 141);
    color: white;
    height: 20px;
    padding: 0 10px;
    // padding: 5px 10px;
    // padding: 5px 10px;
  }

  &_lineheight {
    line-height: 20px;
  }
}

.el-scrollbar__wrap {
  margin-bottom: 0 !important;
}

.study_list {
  // border: 1px solid black;
  width: 350px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;

  // margin: 10px 30px;
  &_underline {
    border: 0px;
    border-bottom: 1px solid black;
  }
}

.study_title {
  font-size: 24;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.study_text {
  color: #b5b5b5;

  &_blck {
    color: black;
  }
}

.study_tag {
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  font-size: 12px;
  background: rgb(215, 215, 215);
  color: black;

  // border: 1px solid black;
  &_color {
    background: rgb(215, 215, 215);
    border: 0px;
  }
}

.borders {
  border: 1px solid black;
}

.track {
  line-height: 25px;
}

.scroll_div {
  height: 750px;
  overflow: scroll;
}

.avtar_height {
  height: 50px;
  line-height: 25px;
  -webkit-text-size-adjust: none;
}

.avatar_size {
  height: 50px;
  width: 50px;
}

.scroll_div {
  height: 500px;
  overflow-y: scroll;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #e8f3fe;
  margin: 10px;
  color: #7dbcfc;
}
</style>
